<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>
<%@ taglib prefix="idy" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<idy:bs-iris-header title_webpage="title.registration">
</idy:bs-iris-header>

<div class="page-body">
	<div class="form-box-title"><h4>Registration: Allergies & Diseases</h4></div>
	<hr/>
	<form:form commandName="patient" method="POST" id="registration-form" cssClass="form-horizontal">
		<div class="form-box-title"><h5>Allergies</h5></div>
		
		<div style="display: none">
			<select id="allergy-status-sample">
				<c:forEach items="${allergyStatus}" var="status">
					<option value="${status.id}">${status.value}</option>
				</c:forEach>
			</select>
			
			<select id="allergen-sample">
				<option value="">--Select One--</option>
				<c:forEach items="${allergens}" var="allergen">
					<option value="${allergen.id}">${allergen.name}</option>
				</c:forEach>
			</select>
		</div>
		
		<div id="dynamic-field-list-allergy" class="control-group">
			<c:choose>
				<c:when test="${empty patient.patientAllergies}">
					<div class="dynamic-field allergy-counter">
						<select class="short" name="patientAllergies[0].allergyStatus">
							<c:forEach items="${allergyStatus}" var="status">
								<option value="${status.id}">${status.value}</option>
							</c:forEach>
						</select>
						<select name="patientAllergies[0].allergen">
							<option value="">--Select One--</option>
							<c:forEach items="${allergens}" var="allergen">
								<option value="${allergen.id}">${allergen.name}</option>
							</c:forEach>
						</select>
						<input type="hidden" name="patientAllergies[0].isDeleted" value="false"/>
						<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
					</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${patient.patientAllergies}" var="patientAllergy" varStatus="sts">
						<div class="dynamic-field allergy-counter" <c:if test="${patientAllergy.isDeleted}">style="display: none;"</c:if>>
							
							<select class="short" name="patientAllergies[${sts.index}].allergyStatus">
								<c:forEach items="${allergyStatus}" var="status">
									<option value="${status.id}" <c:if test='${patientAllergy.allergyStatus.id eq status.id}'>selected="selected"</c:if>>${status.value}</option>
								</c:forEach>
							</select>
							<select name="patientAllergies[${sts.index}].allergen">
								<option value="">--Select One--</option>
								<c:forEach items="${allergens}" var="allergen">
									<option value="${allergen.id}" <c:if test='${patientAllergy.allergen.id eq allergen.id}'>selected="selected"</c:if>>${allergen.name}</option>
								</c:forEach>
							</select>
							<input type="hidden" name="patientAllergies[${sts.index}].isDeleted" value="false"/>
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:forEach>
					
				</c:otherwise>
			</c:choose>
		</div>
		
		<div class="alert alert-info alert-shorter">
			<strong>Heads up! </strong>You can add multiple allergies by clicking &nbsp;&nbsp;<a id="new-allergy" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New allergy</a>
		</div>

		<div class="form-box-title"><h5>Diseases</h5></div>
		<div style="display: none">
			<select id="disease-status-sample">
				<c:forEach items="${diseaseStatus}" var="status">
					<option value="${status.id}">${status.value}</option>
				</c:forEach>
			</select>
			
			<select id="disease-sample">
				<option value="">--Select One--</option>
				<c:forEach items="${diseases}" var="disease">
					<option value="${disease.id}">${disease.name}</option>
				</c:forEach>
			</select>
		</div>
		<div id="dynamic-field-list-disease" class="control-group">
			<c:choose>
				<c:when test="${empty patient.patientDiseases}">
					<div class="dynamic-field disease-counter">
						<select class="short" name="patientDiseases[0].diseaseStatus">
							<c:forEach items="${diseaseStatus}" var="status">
								<option value="${status.id}">${status.value}</option>
							</c:forEach>
						</select>
						<select name="patientDiseases[0].disease">
							<option value="">--Select One--</option>
							<c:forEach items="${diseases}" var="disease">
								<option value="${disease.id}">${disease.name}</option>
							</c:forEach>
						</select>
						<input type="hidden" name="patientDiseases[0].isDeleted" value="false"/>
						<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
					</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${patient.patientDiseases}" var="patientDisease" varStatus="sts">
						<div class="dynamic-field disease-counter" <c:if test='${patientDisease.isDeleted}'>style="display: none;"</c:if>>
							<select class="short" name="patientDiseases[${sts.index}].diseaseStatus">
								<c:forEach items="${diseaseStatus}" var="status">
									<option value="${status.id}" <c:if test='${patientDisease.diseaseStatus.id eq status.id}'>selected="selected"</c:if>>${status.value}</option>
								</c:forEach>
							</select>
							<select name="patientDiseases[${sts.index}].disease">
								<option value="">--Select One--</option>
								<c:forEach items="${diseases}" var="disease">
									<option value="${disease.id}" <c:if test='${patientDisease.disease.id eq disease.id}'>selected="selected"</c:if>>${disease.name}</option>
								</c:forEach>
							</select>
							<input type="hidden" name="patientDiseases[${sts.index}].isDeleted" value="false"/>
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
			
		</div>
		
		<div class="alert alert-info alert-shorter">
			<strong>Heads up! </strong>You can add multiple diseases by clicking &nbsp;&nbsp;<a id="new-disease" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New disease</a>
		</div>
		
		<div class="control-group">
			<div class="controls">
				<input type="submit" class="btn btn-primary" value="Next" name="_target2" id="submit-button"/>
				<input type="submit" class="btn" value="Previous" name="_target0" />
			</div>
		</div>
	</form:form>
</div>


<idy:bs-iris-footer>
<script type="text/javascript">

$(document).ready(function(){
	var allergyStatusSample = $('#allergy-status-sample').html(),
		allergenSample = $('#allergen-sample').html(),
		diseaseStatusSample = $('#disease-status-sample').html(),
		diseaseSample = $('#disease-sample').html();
	
	$('#new-allergy').click(function(){
		var allergyCounter = $('.allergy-counter').size();
		$('#dynamic-field-list-allergy').append('<div class="dynamic-field allergy-counter"><select class="short" name="patientAllergies['+allergyCounter+'].allergyStatus">'+allergyStatusSample+'</select> <select name="patientAllergies['+allergyCounter+'].allergen">'+allergenSample+'</select> <input type="hidden" name="patientAllergies['+allergyCounter+'].isDeleted" value="false"/><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
	});
	
	$('#new-disease').click(function(){
		var diseaseCounter = $('.disease-counter').size();
		$('#dynamic-field-list-disease').append('<div class="dynamic-field disease-counter"><select class="short" name="patientDiseases['+diseaseCounter+'].diseaseStatus">'+diseaseStatusSample+'</select> <select name="patientDiseases['+diseaseCounter+'].disease">'+diseaseSample+'</select> <input type="hidden" name="patientDiseases['+diseaseCounter+'].isDeleted" value="false"/><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
	});
	
	$('.remove').live("click", function(){
		$(this).prev().val("true");
		$(this).parent().fadeOut();
	});
});


</script>
 
</idy:bs-iris-footer>